<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<meta name="viewport"
		content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
	<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
	<title>巡查</title>
	<link rel="stylesheet" type="text/css" href="../../css/api.css" />
	<link rel="stylesheet" type="text/css" href="../../css/style.css" />
	<style>
		html,
		body {
			background-color: #F5F6F6;
		}

		.content {
			opacity: 0;
			visibility: hidden;
			position: absolute;
			left: 0;
			top: 2px;
			width: 100%;
			height: auto;
			box-sizing: border-box;
			transition: all .3s;
		}

		.content table {
			width: 100%
		}

		.content td {
			border-bottom: 1px solid #DFE0E0;
			height: 60px;
		}

		.content td:nth-child(1) {
			padding-left: 10px;
		}

		.content td:nth-child(1) p:nth-child(2) {
			color: #555555
		}

		.content {
			background-color: #F5F6F6;
		}

		.content {
			opacity: 1;
			visibility: visible;
		}

		.Add {
			height: 40px;
			width: 96%;
			background-color: #1ABC9C;
			color: white;
			text-align: center;
			font-size: 15px;
			margin-top: 20px;
			outline: none;
		}

		.fontcolr {
			color: #cccccc
		}

		.clickfont {
			color: #72EDD1
		}

		table,
		th,
		td {
			height: 32px;
			width: 300px;
			border: 1px solid #abbac3;
		}

		table tr:hover {
			background-color: #dafdf3;
		}

		table tr:nth-child(even) {

			background: #dafdf3;

		}

		.control {
			background-color: #dcdcdc26;
			height: 968px;
			padding: 10px;
			font-size: 20px;
			border: 1px solid darkgray;
			margin: 0px 10px;
		}


		.hufbor {
			position: absolute;
			background-color: red;
			width: 25px;
			height: 25px;
			border-radius: 0px 0px 25px 0px;
		}

		.hufbors {
			position: absolute;
			background-color: #1abc9c;
			width: 25px;
			height: 25px;
			border-radius: 0px 0px 25px 0px;
		}

		.yuan {
			background-color: #1abc9c;
			height: 40px;
			width: 340px;
			border-radius: 30px 30px 0 0;
			text-align: center;
			font-size: 20px;
			line-height: 50px;
			color: #ffffff;
			margin-top: -20px;
		}

		table tr:nth-child(even) {

			background: #dafdf3;

		}

		.one {
			width: 337px;
			height: 200px;
			border: 1px solid #616366;
			background-color: #fff;
		}

		table,
		th,
		td {
			height: 32px;
			width: 258px;
			border: 1px solid #abbac3;
		}

		table tr:hover {
			background-color: #dafdf3;
		}

		table tr:nth-child(even) {

			background: #dafdf3;

		}

		.mode {
			background-color: #dcdcdc26;
			height: 100px;
			padding: 10px;
			font-size: 20px;
			border: 1px solid darkgray;
			margin: 10px;
		}

		.control {
			background-color: #dcdcdc26;
			height: 968px;
			padding: 10px;
			font-size: 20px;
			border: 1px solid darkgray;
			margin: 0px 10px;
		}

		.name {
			margin-bottom: 0px;
			border-radius: 30px 30px 0px 0px;
			background-color: #009688;
			font-size: 1.5rem;
			color: white;
			text-align: center;
			padding: 10px;
			height: 35px;
		}

		.conten1 {
			background-color: white;
			color: black;
			height: 216px;
			border: 1px solid black;
		}

		.hufbor {
			position: absolute;
			background-color: red;
			width: 25px;
			height: 25px;
			border-radius: 0px 0px 25px 0px;
		}

		.btnclos {
			margin-left: 1px;
			margin-top: 10px;
			background-color: #FF0000;
			color: white;
			border-radius: 50%;
			width: 50px;
			height: 50px;
			outline: none;
			border: none;
		}

		.btn {
			margin-left: 1px;
			margin-top: 10px;
			background-color: #009688;
			color: white;
			border-radius: 50%;
			width: 50px;
			height: 50px;
			outline: none;
			border: none;
		}

		.num {
			font-size: 35px;
			color: orange;
			position: absolute;
			top: 129px;
		}

		.rad {
			margin-left: 60px;
			width: 27%;
		}

		.choose {
			margin-left: 10px;
		}

		.fon {
			margin-left: 20px;
		}

		.tabll {
			width: 90%;
			text-align: center;
			margin-left: 18px;
			margin-top: 10px;
		}

		.times {
			text-align: center;
			vertical-align: middle;
		}

		.num1 {
			width: 30px;
		}

		.num2 {
			width: 50px;
		}

		.bg {
			margin: 20px auto auto 15px;
		}

		.button {
			background-color: #1abc9c;

			/* Green */
			border: none;
			color: white;
			padding: 15px 32px;
			text-align: center;
			text-decoration: none;
			display: inline-block;
			border-radius: 15px;
			border: 5px solid white;
			font-size: 16px;
			font-family: "FangSong";
			outline: none;
		}

		[v-clock] {
			display: none;
		}
	</style>
</head>

<body>
	<div class="content">
		<table id="" style="position: fixed; top: 0;z-index: 99999;">
			<tr style="background-color:#e6e6e6;width: 100%">
				<td style="height: 10px;">
					<p style="font-size: 16px;color:rgb(12, 4, 4);font-weight: 500;" id="projectname"></p>
				</td>
				<!--<td width="100"><p class="fontcolr"></p></td>
					<td width="30"></td>-->
			</tr>
			<!--	<tr v-for="(s,index) in sjd">			
					<td><p style="font-weight: 800;font-size: 18px;"></p></td>
					<td width="100">	
					<p class="fontcolr">
						2019-10-10
					</p></td>
					<td width="30"><img src="../../image/right.png" height="30%"  @click="data(s.id,s.dataName)"/></td>
				</tr>-->
		</table>
	</div>

	<div style="margin-top: 80px" id="sjd" v-clock>

		<div style="text-align: center;">
			<button @click="auxcmd(aux.id)" v-for="(aux,index) in auxlist" class="button">{{aux.name}}</button>
			<!--<h3>设备状态：<span id="stats">等待上线。。</span></h3>-->
			<div id="quyu"></div>


			<!-- 	<button class="button" type="button" onclick="bbq()">变频器开启</button>
			<button class="button" type="button" onclick="cbbq()">变频器关闭</button>
			<button class="button" type="button" onclick="ddf()">电磁阀开启</button>
			<button class="button" type="button" onclick="cddf()">电磁阀关闭</button> -->
		</div>
		<br>
		<div v-for="(contents,index) in contentlist"
			style="width: 90%;height: 200px;text-align: center;margin-left: 4%;margin-top: 5%;float: left;margin-bottom: 17%;">
			<div class="yuan">
				{{contents.controlName}}
			</div>
			<div class="one">
				<div class="hufbor" id="hufbors"></div>
				<div class="conten1">
					<div class="hufbor" id="hufbor"></div>
					<input type="button" @click="change($event,contents.id)" value="开" class="btn">
					<input type="button" @click="change($event,contents.id)" value="关" class="btnclos">
					<span class="fon">阈值:{{contents.threshold}}</span>


					<table class="tabll">
						<tr>
							<th class="num2"></th>
							<th class="times">启动时间</th>
							<th class="times">停止时间</th>
						</tr>
						<tr>
							<td class="num1">1</td>
							<td>{{contents.timestart}}</td>
							<td>{{contents.timeend}}</td>
						</tr>
						<tr>
							<td class="num1">2</td>
							<td>{{contents.onetimestart}}</td>
							<td>{{contents.onetimeend}}</td>
						</tr>
						<tr>
							<td class="num1">3</td>
							<td>{{contents.totimestart}}</td>
							<td>{{contents.totimeend}}</td>
						</tr>
					</table>
				</div>
			</div>
		</div>


	</div>

</body>
<script type="text/javascript" src="../../script/common.js"></script>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/vue.js"></script>
<script type="text/javascript" src="../../script/jquery-1.11.0.min.js"></script>
<script>
	apiready = function () {
		var projectname = $api.getStorage('selectpor').projectName;
		$("#projectname").text(projectname);
		var user = $api.getStorage('userSession');
		var departid = $api.getStorage('selectpor').id
		//项目下数据点
		var IP = "";
		//	alert(1)
		var app = new Vue({
			el: '#sjd',
			data: {
				contentlist: [],
				auxlist: []
			},
			created: function () {
				$.ajax({
					type: "post",
					//async : false, //同步执行0
					url: BaseServiceUrl + "mobile/control/findAllsaux.json",
					data: {
						area: departid
					},
					dataType: "json", //返回数据形式为json
					success: function (result) {
						for (var i = 0; i < result.data.length; i++) {
							app.auxlist.push(result.data[i]);
							IP = result.data[i].ipandprot;
						}
					}
				});
				$.ajax({
					type: "post",
					//async : false, //同步执行
					url: BaseServiceUrl + "mobile/control/findAlls.json",
					data: {
						area: departid
					},
					dataType: "json", //返回数据形式为json
					success: function (result) {
						for (var i = 0; i < result.data.length; i++) {
							app.contentlist.push(result.data[i])
						}
					}
				});
			},
			methods: {
				change: function (btn, id) {
					if ($(btn.currentTarget).val() == '开') {
						api.showProgress({
							title: '下发指令中，请稍后...',
							modal: false
						});
						$.ajax({
							type: "get",
							//async : false, //同步执行
							url: "http://47.116.133.36:10333/control/va/VA17850532774",
							data: {
								onoff: "on",
								relayId: 3,
								address: 1
							},
							dataType: "json", //返回数据形式为json
							success: function (res) {
								if (res.result == "OK") {
									alert("操作成功！");
									$("#hufbor").css("background-color", "#429789");

									$("#hufbors").css("background-color", "#429789");
									api.hideProgress();
								} else {
									alert("操作失败请稍后重试！");
									$("#hufbor").css("background-color", "red");
									$("#hufbors").css("background-color", "red");
									api.hideProgress();

								}
							}, error: function (xhr, ajaxOptions, thrownError) {
								console.log(JSON.stringify(xhr));
								console.log(ajaxOptions);
								console.log(thrownError);
								if (thrownError == "timeout") {
									alert("操作超时请重试！");
									api.hideProgress();

								} else {
									alert("设备不在线请稍后重试！");
									api.hideProgress();

								}
							}
						});
					} else {
						api.showProgress({
							title: '下发指令中，请稍后...',
							modal: false
						});
						$.ajax({
							type: "get",
							//async : false, //同步执行
							url: "http://47.116.133.36:10333/control/va/VA17850532774",
							data: {
								onoff: "off",
								relayId: 3,
								address: 1
							},
							dataType: "json", //返回数据形式为json
							success: function (res) {
								if (res.result == "OK") {
									alert("操作成功！");
									$("#hufbor").css("background-color", "red");
									$("#hufbors").css("background-color", "red");	 
									api.hideProgress();
								} else {
									alert("操作失败请稍后重试！");
									$("#hufbor").css("background-color", "#429789");
									$("#hufbors").css("background-color", "#429789");
									api.hideProgress();
								}
							}, error: function (xhr, ajaxOptions, thrownError) {

								if (thrownError == "timeout") {
									alert("操作超时请重试！");
									api.hideProgress();
								} else {
									alert("设备不在线请稍后重试！");
									api.hideProgress();
								}
							}
						});
					}
				},
				auxcmd: function (id) {
					$.ajax({
						type: "post",
						//async : false, //同步执行
						url: BaseServiceUrl + "mobile/control/execute.json",
						data: {
							id: id
						},
						dataType: "json", //返回数据形式为json
						success: function (result) {
							if (result.code == 0) {
								alert(result.msg);
							}
							console.log(result)
						}
					});
				}
			}
		});
		var timer = null


		timer = setInterval(function () {
			if (IP != '') {
				$.ajax({
					type: "post",
					//async : false, //同步执行
					url: BaseServiceUrl + "mobile/control/selectall.json",
					data: {
						ipprot: IP
					},
					dataType: "json", //返回数据形式为json
					success: function (result) {
						if (result.code == 0) {
							console.log(result.msg);
							$("#stats").text("连接正常！");
							$("#stats").css({
								"color": "#7ac5f4"
							});
							$.ajax({
								type: "post",
								url: BaseServiceUrl + "mobile/control/selectipconfig.json",
								data: {
									ipprot: IP
								},
								dataType: "json", //返回数据形式为json
								success: function (result) {
									//alert(JSON.stringify(result))
									if (result.code == 0) {
										//alert(result.msg);
										$("#quyu").empty();
										var htm = `
										<table class="tabll">
											<tr>
												<th class="num2"></th>
												<th class="times">名称</th>
												<th class="times">状态</th>
											</tr>
											<tr>
												<td class="num1">1</td>
												<td>变 &nbsp;频 &nbsp;器：</td>
												<td style="color:${result.data.runningState == 1 ? "#7ac5f4" : "red"}">${result.data.runningState == 1 ? "开" : "关"}</td>
											</tr>
											<tr>
												<td class="num1">2</td>
												<td>电 &nbsp;动 &nbsp;阀：</td>
												<td style="color:${result.data.valveOpen == 1 ? "#7ac5f4" : "red"}">${result.data.valveOpen == 1 ? "开" : "关"}</td>
											</tr>
											<tr>
												<td class="num1">3</td>
												<td>一号阀门：</td>
												<td style="color:${result.data.valveOpen1 == 1 ? "#7ac5f4" : "red"}">${result.data.valveOpen1 == 1 ? "开" : "关"}</td>
											</tr>
											<tr>
												<td class="num1">4</td>
												<td>二号阀门：</td>
												<td style="color:${result.data.valveOpen2 == 1 ? "#7ac5f4" : "red"}">${result.data.valveOpen2 == 1 ? "开" : "关"}</td>
											</tr>
											<tr>
												<td class="num1">5</td>
												<td>三号阀门：</td>
												<td style="color:${result.data.valveOpen3 == 1 ? "#7ac5f4" : "red"}">${result.data.valveOpen3 == 1 ? "开" : "关"}</td>
											</tr>
										</table>`;
										$("#quyu").append(htm);
									} else if (result.code == 1) {

									}
									console.log(result)
								}
							});
						} else if (result.code == 1) {
							$("#stats").text("设备离线！");
							$("#stats").css({
								"color": "red"
							});
						}
						//console.log(result)
					}
				});
			}
		}, 10000);

		/* 
					var apps = new Vue({
						el : '#sjd',
						data : {
							sjd : []
						},
						created : function() {
							$.ajax({
								type : "post",
								//async : false, //同步执行
								url : BaseServiceUrl+"mobile/showData/interpretation.json",
								data : {
									id : departid
								},
								dataType : "json", //返回数据形式为json
								success : function(result) {
									//alert(JSON.stringify(result));
									for (var i = 0; i < result.obj.length; i++) {
										apps.sjd.push(result.obj[i]);					
									}
								}
							});
						},
						methods : {
							data : function(id,name) {
								api.openFrame({
									name : 'xxxxx',
									url : '../detailed/datacharts_window.html',
									rect : {
										x : 0,
										y : 0,
										w : 'auto',
										h : 'auto'
									},
									pageParam : {
										id : id,
										name:name
									}, //传递参数
									bounces : true,
									delay : 200
								});
							}
						}
					}) */

	};
</script>

</html>